<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul class="info" v-if="isShow">
            <item
                v-for="item in orders"
                v-bind:data="item"
                v-key="item"
            >
            </item>
        </ul>
        <input type="text" v-model="info" placeholder="请输入订单信息">
        <button v-on:click="handleShow">显示</button>
        <button v-on:click="handleOrder">下单</button>
    </div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    Vue.component('item', {
        props: ['data'],
        template: '<li class="item">{{ data }}</li>',
    });

    var app = new Vue({
        el: '#app',
        data: {
            info: '',
            orders: [
                '订单1',
                '订单2',
                '订单3',
            ],
            isShow: false,
        },
        methods: {
            handleShow: function() {
                this.isShow = true;
            },
            handleOrder: function() {
                this.orders.push(this.info);
            },
        },
    });
</script>
<style>
    .item {
        font-size: 20px;
        color: orange;
        font-style: italic;
        list-style: none;
    }
</style>
</html>